<template>
  <div class="work">
    <div class="work-table">
      <el-form inline :model="searchForm">
        <el-form-item label="文件名称">
          <el-input
            v-model="searchForm.fileName"
            placeholder="请输入关键字"
            clearable
          />
        </el-form-item>
        <el-form-item label="导入状态">
          <el-select
            v-model="searchForm.importStatus"
            placeholder="导入状态"
            clearable
          >
            <el-option label="成功" value="成功" />
            <el-option label="失败" value="失败" />
          </el-select>
        </el-form-item>
        <el-form-item label="导入时间">
          <el-date-picker
            v-model="searchForm.timeRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column
          prop="fileName"
          label="文件名称"
          show-overflow-tooltip
        />
        <el-table-column
          prop="importStatus"
          label="导入状态"
          show-overflow-tooltip
        />
        <el-table-column
          prop="createTime"
          label="导入时间"
          show-overflow-tooltip
        />
        <el-table-column
          prop="fileRecords"
          label="文件记录数"
          show-overflow-tooltip
        />
        <el-table-column
          prop="importCount"
          label="导入记录数"
          show-overflow-tooltip
        />
        <el-table-column prop="createBy" label="操作人" show-overflow-tooltip />
      </el-table>

      <div class="pagination-container">
        <span class="total-count">总共 {{ total }} 个项目</span>
        <el-pagination
          :current-page="currentPage"
          :page-size="pageSize"
          :page-sizes="[10, 20, 30, 50]"
          :total="total"
          layout="prev, pager, next, jumper, sizes"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { fetchHistoryList } from "./services";
import dayjs from "dayjs";

// 搜索表单
const searchForm = ref({
  fileName: "",
  importStatus: "",
  timeRange: [],
});

// 表格数据和总数
const tableData = ref([]);
const total = ref(0);

// 分页相关
const currentPage = ref(1);
const pageSize = ref(10);

// 查询数据
async function fetchData() {
  const params = {
    ...searchForm.value,
    pageNum: currentPage.value,
    pageSize: pageSize.value,
  };
  // 处理分配日期区间
  if (params.timeRange && params.timeRange.length === 2) {
    params.params = {
      beginTime: dayjs(params.timeRange[0]).format("YYYY-MM-DD 00:00:00"),
      endTime: dayjs(params.timeRange[1]).format("YYYY-MM-DD 23:59:59"),
    };
    delete params.timeRange;
  }
  const res = await fetchHistoryList(params);
  if (res.code === 200) {
    tableData.value = res.rows || [];
    total.value = res.total || 0;
  }
}

// 搜索
function handleSearch() {
  currentPage.value = 1;
  fetchData();
}

// 分页
function handleCurrentChange(page) {
  currentPage.value = page;
  fetchData();
}
function handleSizeChange(size) {
  pageSize.value = size;
  currentPage.value = 1;
  fetchData();
}

// 首次加载
onMounted(() => {
  fetchData();
});
</script>

<style lang="scss" scoped>
@import "./index.scss";
</style>
